<template>
	<view class="bg">
		<view class="donebutton" @click="back()">
			完成
		</view>
		<view class="donebutton2" @click="add">
			+
		</view>
		<view class="list">
			<view v-for="(item, index) in list" :key="index">
				<view class="list-item">
					<view class="xuhao">{{ item.shunxu }}</view>
					<view class="list-item-title" @click="jumpTo(item)">顺序:{{ item.jingdianname }}</view>
					<view class="list-item-content">创建时间:{{ item.youwantime }}</view>
					<view class="shanchu" style="font-weight: 400;color: #999;" @tap.stop="closePlan(item.id)">
						x
					</view>
				</view>
				<view class="jiantou" v-if="list.length > index + 1">
					<img src="../../static/jt.png" alt="">
				</view>
			</view>
		</view>

		<view v-show="isShow" @click="guanbi" class="mask"></view>
		<view v-show="isShow" class="popup">
			<view @click="guanbi" class="guanbi">
				关闭
			</view>
			<view class="popup-content">
				<view class="popup-title">顺序:</view>
				<input type="text" v-model="planName">
				<!--日期选择-->

				<view class="SelectDate">
					<view class="DateLabel">
						景区选择
					</view>
					<view class="DateText">
						<picker v-model="selectedScenicIndex" :range="scenicSpotList" :range-key="'jingdianmingcheng'"
							@change="confirmPicker">
							<view class="date-picker">{{ selectedScenicSpot }}</view>
						</picker>
					</view>
				</view>
				<view class="SelectDate">
					<view class="DateLabel">
						游玩日期
					</view>
					<view class="DateText">
						<picker mode="date" @change="onDateChange" :value="DateValue">
							<view class="date-picker">{{ DateValue }}</view>
						</picker>
					</view>
				</view>

				<view class="SelectTime">
					<view class="TimeLabel">
						游玩时间
					</view>
					<view class="TimeText">
						<picker mode="time" @change="onTimeChange" :value="TimeValue">
							<view class="Time-picker">{{ TimeValue }}</view>
						</picker>
					</view>
				</view>

				<button class="btn" type="button" @click="hitbtn">提交</button>

			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scenicSpotList: ['景区1', '景区2', '景区3', '景区4'], // 景区名称列表
			selectedScenicIndex: -1, // 选中的景区索引
			selectedScenicSpot: '点击选择景区', // 选中的景区名称
			selectedScenicSpotID: -1,//选中的景区id
			id: -1,
			list: [

			],
			planName: '',
			isShow: false,
			DateValue: "请选择日期",
			TimeValue: "请选择时间",
			delete: []
		};
	},
	onLoad(options) {
		console.log('%c [ options ]-75', 'font-size:13px; background:pink; color:#bf2c9f;', options)
		this.id = options.send
		this.xqinit()
		this.jdxxlist()
	},
	methods: {
		jumpTo(item) {
			console.log('%c [ item ]-98', 'font-size:13px; background:pink; color:#bf2c9f;', item)
			uni.navigateTo({
				url: `/pages/jingdianxinxi/detail?id=${item.jingdianid}&lat=${item.jingdianxinxiEntity.lat}&lng=${item.jingdianxinxiEntity.lng}`
			})
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		async confirmDelete(id) {
			console.log('id: ', id)
			this.delete.push(id)
			let res = await this.$api.del(`youwanjihuajingdian`, this.delete)
			if (res.code == 0) {
				this.xqinit()
			}
		},
		closePlan(id) {
			uni.showModal({
				title: '提示',
				content: '是否删除该计划？',
				showCancel: true, // 是否显示取消按钮
				cancelText: '取消', // 取消按钮的文本内容
				confirmText: '确定', // 确定按钮的文本内容
				success: (res) => {
					if (res.confirm) {
						this.confirmDelete(id)
						console.log('用户点击确定', res);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				},
			});
		},
		async jdxxlist() {
			let res = await this.$api.jdxxlist()
			if (res.code == 0) {
				uni.showToast({
					title: '获取成功',
					icon: 'none',
				})
				this.scenicSpotList = res.data.list
				console.log('%c [ this.scenicSpotList ]-99', 'font-size:13px; background:pink; color:#bf2c9f;', this.scenicSpotList)
			} else {
				uni.showToast({
					title: '获取失败',
					icon: 'none',
				})
			}
		},
		confirmPicker(event) {
			console.log('%c [ event ]-86', 'font-size:13px; background:pink; color:#bf2c9f;', event)
			// 确认选择器时触发
			const index = event.detail.value;
			this.selectedScenicIndex = index;
			this.selectedScenicSpot = this.scenicSpotList[index].jingdianmingcheng;
			this.selectedScenicSpotID = this.scenicSpotList[index].id;
		},
		async xqinit() {
			let res = await this.$api.ywinit(this.id)
			console.log('%c [ res ]-82', 'font-size:13px; background:pink; color:#bf2c9f;', res)
			if (res.code == 0) {
				uni.showToast({
					title: '获取成功',
					icon: 'none',
				})
				this.list = res.data.list
			} else {
				uni.showToast({
					title: '获取失败',
					icon: 'none',
				})
			}
		},
		async hitbtn() {
			if (this.planName == '') {
				uni.showToast({
					title: '请输入顺序',
					icon: 'none'
				});
				return
			}
			if (this.DateValue == '请选择日期') {
				uni.showToast({
					title: '请选择游玩日期',
					icon: 'none'
				});
				return
			}
			if (this.TimeValue == '请选择时间') {
				uni.showToast({
					title: '请选择游玩时间',
					icon: 'none'
				});
				return
			}
			let upobj = {
				youwanjihuaid: this.id,
				shunxu: this.planName,
				jingdianid: this.selectedScenicSpotID,
				jingdianname: this.selectedScenicSpot,
				youwantime: this.DateValue + ' ' + this.TimeValue
			}
			let res = await this.$api.ywadd(upobj)
			console.log('%c [ res ]-120', 'font-size:13px; background:pink; color:#bf2c9f;', res)
			if (res.code == 0) {
				this.xqinit()
			}
			this.isShow = false

		},
		guanbi() {
			this.isShow = false
		},
		add() {
			this.isShow = true
		},
		onDateChange: function (e) {
			this.DateValue = e.detail.value;
		},

		onTimeChange: function (e) {
			this.TimeValue = e.detail.value;
		}

	},
}
</script>

<style lang="scss">
.jiantou {
	width: 100%;
	height: 60px;
	text-align: center;

	img {
		width: 30px;
		height: 50px;
	}
}

.bg {
	width: 100vw;
	height: calc(100vh - 44px);
	background: linear-gradient(#f5f7fa 0%, #58CFA6 100%);

}

.list {
	padding-top: 5px;
	width: 100vw;
	height: calc(100vh - 44px);
	overflow-y: scroll;


	.list-item {
		position: relative;
		width: 90%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 10px;

		.xuhao {
			position: absolute;
			top: -10px;
			left: -10px;
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			background: #24ACF2;
			color: #fff;
			font-weight: 800;
			border-radius: 50%;
			margin: 10px auto;
			z-index: 999;
		}

		.shanchu {
			position: absolute;
			top: 5px;
			right: 10px;
		}

		.list-item-title {
			word-break: break-all;
			font-size: 16px;
			color: #333;
			font-weight: bold;
		}

		.list-item-content {
			font-size: 14px;
			color: #333;
		}
	}

	.list-item2 {
		width: 90%;
		margin: 0 auto;
		background: #ffffff80;
		border: #ffd9008b 1px solid;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 10px;
		text-align: center;
		font-weight: 800;
		font-size: 30px;
		color: #24ACF2;
	}
}

.popup {
	position: fixed;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 270px;
	background: #fff;
	border-radius: 10px;
	z-index: 999;

	.popup-content {
		padding: 10px;
		width: 100%;
		height: 40px;
		padding: 0 10px;
		margin-top: 10px;

	}
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #000;
	opacity: 0.6;
	z-index: 998;
}


input {
	width: 100%;
	height: 40px;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 0 10px;
	margin-top: 10px;
}

.btn {
	width: 100%;
	height: 40px;
	line-height: 40px;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 0 10px;
	margin-top: 55px;
	background: #24ACF2;
	color: #fff;
	font-weight: 800;
}

.guanbi {
	width: 100%;
	text-align: right;
	font-size: 16px;
	color: #888;
	padding: 10px;
}

/* ## 日期 ## */

.SelectDate {
	height: 72rpx;
	display: flex;
	flex-direction: grow;
	margin-top: 24rpx;
}

.DateLabel {
	width: 0;
	flex-grow: 3;
	text-align: left;
	// padding-left: 24px;

}

.DateText {
	width: 0;
	flex-grow: 7;
}

.date-picker {
	color: #8f8f8f;
}

/* ## 时间 ## */

.SelectTime {
	display: flex;
	flex-direction: grow;
}

.TimeLabel {
	width: 0;
	flex-grow: 3;
	text-align: left;
	// padding-left: 24px;
}

.TimeText {
	width: 0;
	flex-grow: 7;
}

.Time-picker {
	color: #8f8f8f;
}


.donebutton {
	width: 60px;
	height: 60px;
	background: #24ACF2;
	border-radius: 50%;
	margin: 10px auto;
	z-index: 999;
	position: fixed;
	right: 10px;
	bottom: 20px;
	text-align: center;
	line-height: 55px;
	color: #fff;
	font-weight: 800;
	font-size: 20px;
}

.donebutton2 {
	width: 60px;
	height: 60px;
	background: #24ACF2;
	border-radius: 50%;
	margin: 10px auto;
	z-index: 999;
	position: fixed;
	right: 10px;
	bottom: 100px;
	text-align: center;
	line-height: 55px;
	color: #fff;
	font-weight: 800;
	font-size: 50px;
}
</style>
